
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<link rel="stylesheet" href="css/style.css"/>-->
		<style>
    *{
        margin:0px;
        padding:0px;
    }
    #cannon{
        width:74px;
        height:76px;
        background:url(images/cannon1.png);
        position:absolute;
    }
</style>
	</head>

<body>
<div id="cannon"></div>
<script>
    var ww = document.documentElement.clientWidth || document.body.clientWidth;
    var wh = document.documentElement.clientHeight || document.body.clientWidth;

    cannon.style.bottom = 0;
    cannon.style.left = ww/2 - 74/2 ;

    document.onclick = function(e){
        var x = e.pageX;
        var y = e.pageY;
        var a = x-parseInt(cannon.style.left);
        var b = wh - y;
        var deg = Math.atan(a/b)*180/Math.PI;
        cannon.style.transform = "rotate("+deg+"deg)";
    }
</script>
</body>
</html>